Vue3核心源码解析 (一) : 源码目录结构 |
您所在的位置:网站首页 › js 压缩文件 › Vue3核心源码解析 (一) : 源码目录结构 |
通过软件框架阅读源码可以对框架本身运行机制进行学习,更能了解框架的API设计、原理及流程、设计思路;我们要知其然,更知其所以然。 Vue 3的源码相对于Vue 2版本有了较大程度的改变,采用Monorepo规范的目录结构,同时使用TypeScript作为开发语言(vue2在2022年4月底也更换TypeScript为开发语言 ),并添加了很多新的特性和优化。 1. 下载&启动Vue3源码2023-03-31最新版本为V3.3.0-alpha.5 git clone https://github.com/vuejs/core.git下载完成后进入core文件夹,由于vue3源码采用Yarn构建,我们还要先安装下Yarn npm i yarn -g然后安装相关依赖 yarn --ignore-scripts可用npm run dev开启源码调试模式,完整的源代码目录结构如下图 源代码目录结构 core ├─ packages │ ├─ compiler-core // 核心编译器 │ ├─ compiler-dom // dom编译器 │ ├─ compiler-sfc // vue单文件编译器 │ ├─ compiler-ssr // 服务端渲染编译 │ ├─ dts-test //测试Typescript类型以确保类型保持为预期类型 │ ├─ global.d.ts // TypeScript声明文件 │ ├─ reactivity // 响应式模式,可以和其它框架配合使用 │ ├─ reactivity-transform // 该功能现在被标记为不推荐使用,并将从Vue核心中删除,提案已经被放弃。 │ ├─ runtime-core // 运行时核心实例相关代码 │ ├─ runtime-dom // 运行时dom相关API、属性、事件处理 │ ├─ runtime-test // 运行时测试相关代码 │ ├─ server-renderer // 服务器渲染 │ ├─ sfc-playground // 单文件组件在线调试器 │ ├─ shared // 内部工具库,不对外暴露 │ ├─ size-check // 测试代码体积 │ ├─ template-explorer // 用于调试编译器输出的开发工具 │ ├─ vue //面向公众的完整版本,包含运行时和编译器 │ └─ vue-compat //是Vue 3的一个构建,它提供了可配置的Vue 2兼容行为。 2. 目录模块compiler-core、compiler-dom、runtime-core、runtime-dom这几个模块比较重要。 compile:可以理解为程序编译时,是指我们写好的源代码在被编译成为目标文件这段时间,在这里可以理解为我们将.vue文件编译成浏览器能识别的.js文件的一些工作。 runtime:可以理解为程序运行时,即程序被编译了之后,在浏览器打开程序并运行它,直到程序关闭的这段时间的系列处理。 reactivity目录也比较重要,它是响应式模块的源码,由于Vue 3整体源码采用的是Monorepo(单体仓库)规范,因此其下面每个子模块都可以独立编译和打包,从而独立对外提供服务,在使用时采用require('@vue/reactivity')引入,进入reactivity目录下可以看到有对应的package.json文件。 3. 构建版本可以通过以下命令进行构建,构建出Vue 3所有的版本 npm run build构建好的文件在目录: core\packages\vue\dist ,说明如下: // cjs(用于服务端渲染) vue.cjs.js vue.cjs.prod.js(生产版,代码进行了压缩) // global(用于浏览器标签导入,导入之后会增加一个全局的Vue对象) vue.global.js vue.global.prod.js(生产版,代码进行了压缩) vue.runtime.global.js vue.runtime.global.prod.js(生产版,代码进行了压缩) // browser(用于支持ES 6 Modules浏览器标签导入) vue.esm-browser.js vue.esm-browser.prod.js(生产版,代码进行了压缩) vue.runtime.esm-browser.js vue.runtime.esm-browser.prod.js(生产版,代码进行了压缩) // bundler(这两个版本没有打包所有的代码,只会打包使用的代码,需要配合打包工具来使用,会 让Vue体积更小) vue.esm-bundler.js bue.runtime.esm-bundler.js也可通过以下命令选择性构建,具体的-f参数以及其他参数配置的含义可以在core/rollup.config.js里面找到。 # 构建运行时版本 vue.runtime.global.js node scripts/dev.js -f global-runtime # 构建出完整版,vue.global.js node scripts/dev.js -f global如果需要在客户端编译模板(即将字符串传递给template选项,或者使用元素的DOM内的HTML作为模板挂载到元素),则需要编译器,因此需要完整的构建版本,代码如下: // 需要编译器 Vue.createApp({ template: '{{ hi }}' }) // 不需要 Vue.createApp({ render() { return Vue.h('div', {}, this.hi) } })当使用Webpack的vue-loader时,.vue文件中的模板会在构建时预编译为JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。所以,如果直接在浏览器打开Vue的页面,则可以直接采用引入完整版本,如果采用构建工具(例如Webpack)进行构建,则可以使用import引入运行时版本,和构建相关的脚本源码都在core/scripts下面。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |